<template>
  <div>
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="任务名称" prop="taskName">
        <el-input v-model="form.taskName" style="width: 500px"></el-input>
      </el-form-item>
      <el-form-item label="任务详情" prop="taskDetail">
        <el-input
          type="textarea"
          v-model="form.taskDetail"
          style="width: 500px"
        ></el-input>
      </el-form-item>
      <el-form-item label="任务发起人" prop="taskForm">
        <el-input
          v-model="form.taskForm"
          style="width: 500px"
          :disabled="true"
        ></el-input>
      </el-form-item>
      <el-form-item label="任务接收人" prop="taskTo">
        <el-select
          v-model="form.taskTo"
          placeholder="请选择"
          style="width: 500px"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="任务开始时间" prop="taskStartTime">
        <el-date-picker
          v-model="form.taskStartTime"
          type="date"
          placeholder="请选择开始时间"
          style="width: 500px"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="任务结束时间" prop="taskEndTime">
        <el-date-picker
          v-model="form.taskEndTime"
          type="date"
          placeholder="请选择结束时间"
          style="width: 500px"
          value-format="yyyy-MM-dd "
        >
        </el-date-picker>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        taskName: "",
        taskDetail: "",
        taskForm: "",
        taskTo: "",
        taskStartTime: "",
        taskEndTime: "",
      },
      rules: {
        taskName: [
          { required: true, message: "请输入任务名称", trigger: "blur" },
        ],
        taskDetail: [
          { required: true, message: "请输入任务详情", trigger: "blur" },
        ],
        taskForm: [
          { required: true, message: "请输入发起人", trigger: "blur" },
        ],
        taskTo: [{ required: true, message: "请输入接收人", trigger: "blur" }],
        taskStartTime: [
          { required: true, message: "请输入开始时间", trigger: "blur" },
        ],
        taskEndTime: [
          { required: true, message: "请输入结束时间", trigger: "blur" },
        ],
      },
      options: [],
    };
  },
  created() {
    this.form.taskForm = this.$store.state.user.info.username;
  },
};
</script>

<style>
</style>